<template>
   <!-- 添加或修改岗位对话框 -->
   <el-dialog title="选择文章模版" v-model="dialogVisible" width="500px" append-to-body @close="handleClose">
      <el-form ref="postRef" label-width="80px">
         <el-form-item label="文章模版" prop="title">
            <el-select v-model="templateType" placeholder="请选择文章模版" style="width: 240px">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" v-show="item.value == type"
                  :disabled="item.disabled" />
            </el-select>
         </el-form-item>
      </el-form>
      <template #footer>
         <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
         </div>
      </template>
   </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
// 1. 正确定义 props
const props = defineProps({
   dialogShow: {
      type: Boolean,
      required: true,
      default: false
   },
   type: {
      type: String,
      required: true,
      default: '1'
   },
})
// 2. 定义组件内部的对话框显示状态
const dialogVisible = ref(false)
const options = [
  {
    value: '1',
    label: '图文展示模版',
  },
  {
    value: '2',
    label: '图文交叉模版',
  },
  {
   value: '3',
   label: '富文本模版',
}
]
// 3. 监听父组件传入的 dialogShow
watch(() => props.dialogShow, (newVal) => {
   dialogVisible.value = newVal
   
   console.log(dialogVisible.value,'dialogVisible')
})
watch(()=> props.type,(newVal)=> {
   type.value = newVal
   console.log(type.value,'typetypetype')

})

// 4. 定义 emit 以便向父组件通知状态变化
const emit = defineEmits(['update:dialogShow','getTemplateType'])

// 5. 关闭对话框时通知父组件
const handleClose = () => {
   dialogVisible.value = false
   emit('update:dialogShow', false)
}
const templateType = ref('')

onMounted(() => {
  
});


const submitForm = () => {
   emit('getTemplateType', templateType.value)
   dialogVisible.value = false
}
const cancel = () => {
   dialogVisible.value = false
}  

</script>